<template>
  <div class="scroll-wrapper">
    <!-- 我是文章列表组件
     内容{{channel}}
     <p v-for="n in 20" :key="n.id">{{n}}</p> -->
    <!-- finished默认值是false,判断是否已加载完成，加载完成后不再触发load事件 -->
    <van-pull-refresh
      v-model="isPullLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="article in list"
          :key="article.art_id.toString()"
          :title="article.title"
        >
          <div slot="label">
            <van-grid
              :column-num="article.cover.images.length"
              v-if='article.cover.images.length'
            >
              <!-- 图片区域
        column-num： 用来等分几列，有几张图就有几列
        -->
              <van-grid-item
                v-for="(value,idx) in article.cover.images"
                :key="idx"
              >
                <van-image
                  lazy-load
                  :src="value"
                />
              </van-grid-item>
            </van-grid>
            <!-- 文字区域 -->
            <div class="meta">
              <span>{{article.aut_name}}</span>
              <span>{{article.comm_count}}p评论</span>
              <span>{{article.pubdate | relativeTime}}</span>

              <!-- v-if，如果是登陆用户(有没有token)，有token为true则显示x按钮
                   按钮的图标在vant搜索Icon图标 赋值名字 就可以调用显示
              -->
              <span
                class="close"
                v-if="$store.state.tokenInfo.token"
                @click="hShowMoreAction(article)"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <!-- 更多操作的弹层 -->
    <van-popup
      v-model="isShowMoreAction"
      :style="{ width: '80%' }"
    >
      <more-action
        ref="moreAction"
        @report="hReport"
        @un-like='hUnlike'
      ></more-action>
    </van-popup>
  </div>
</template>

<script>
import { getArticles, unLike, report } from '@/api/articles.js'
import MoreAction from './moreAction.vue'
// props: ['属性名', ...] 用来接收父组件传入的数据
export default {
  name: 'articleList',
  props: ['channel'],
  data () {
    return {
      isPullLoading: false,
      timestamp: Date.now(), // 时间戳
      list: [], // 数据列表
      loading: false,
      finished: false,
      isShowMoreAction: false, // true是显示图层
      articleId: '' // 文章编号
    }
  },
  components: {
    MoreAction
  },
  methods: {
    // 收到了moreAction子组件触发的report事件
    // 用户点击了举报中的某一个
    async hReport (reportTypeId) {
      console.log('收到的举报类型是', reportTypeId)
      try {
        const res = await report(this.articleId, reportTypeId)
        console.log(res)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
      // 2、删除文章
      this.delArticle(this.articleId)
      // 3、关闭弹窗
      this.isShowMoreAction = false
    },
    // moreAction子组件传递，用户点击了不感兴趣
    async hUnlike () {
      // 1、发请求 通知后端，以后不推荐类似内容
      try {
        const res = await unLike(this.articleId)
        console.log(res)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.error('操作失败')
      }
      // 2、删除文章
      this.delArticle(this.articleId)
      // 3、关闭弹窗
      this.isShowMoreAction = false
    },
    delArticle (articleId) {
      // findIndex查找数组中所匹配的条件数据
      const idx = this.list.findIndex((article) => {
        return article.art_id.toString() === articleId
      })
      if (idx !== -1) {
        this.list.splice(idx, 1)
      }
    },
    // 用户在某个文章上面点击了关闭效果
    hShowMoreAction (article) {
      // 1、显示 更多操作弹窗
      this.isShowMoreAction = true
      // 2、记下当前被操作的文章的编号
      this.articleId = article.art_id.toString()
      // article.art_id可能是一个Bigint对象，所以用toString()转成字符串
      console.log(article.art_id.toString())
      // 3、把子组件MoreAction中的isReport改成false，也就是不显示弹窗
      // this.$refs.moreAction在初次点击关闭效果的时候是没有值，也就是undefined,是不能进入条件判断的
      // 点击之后就创建了isReport，进入判断
      if (this.$refs.moreAction) {
        this.$refs.moreAction.isReport = false
      }
    },
    // 下拉刷新，去获取最新的数据，添加到列表中
    async onRefresh () {
      // 发ajax请求，获取数据
      const res = await getArticles(this.channel.id, Date.now())
      console.log('getArticles', res)
      const arr = res.data.data.results
      // 1.把数据添加到List中
      // unshift是把数据放在数组的头部
      this.list.unshift(...arr)
      // 2.更新loading
      this.isPullLoading = false
    },
    async onLoad () {
      // 发ajax请求，获取数据
      const res = await getArticles(this.channel.id, this.timestamp)
      console.log('getArticles', res)
      const arr = res.data.data.results
      this.timestamp = res.data.data.pre_timestamp
      // 1.把数据添加到List中
      this.list.push(...arr)

      // 2.把loading手动设置为false：加载状态结束
      this.loading = false

      // 3.数据全部加载完成
      if (this.list.length === 0) {
        this.finished = true // finished设为true就不会再调用onLoad
      }
    }
  },
  created () {
    console.log('根据父传入的id,去发ajax请求，获取数据并显示（上拉加载，下拉刷新）')
  }
}
</script>

<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
  display: flex;
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
